import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { Accordion, Tag, Stepper } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../../assets/iconfont/iconfont.css';

// widget 
// import InputNumber from '../../../Common/InputNumber'

class ProductionAttr extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	stepValue: 1,
        	price: this.getPrice(props) || 0
        }
    }
    componentWillReceiveProps(nextProps) {
    	if(nextProps.meyley != this.props.meyley) {
    		this.setState({
    			price: this.getPrice(nextProps) || 0
    		})
    	}
    }
    getPrice(props) {
    	const promotePrice = props.meyley && props.meyley.productionDetail && props.meyley.productionDetail.promotePrice
    	const shopPrice = props.meyley && props.meyley.productionDetail && props.meyley.productionDetail.shopPrice
    	const marketPrice = props.meyley && props.meyley.productionDetail && props.meyley.productionDetail.marketPrice

    	return promotePrice || shopPrice || marketPrice
    }
    onStepChange(stepValue) {
    	const { onGoodsNumberChange } = this.props

    	this.setState({
    		stepValue
    	})
    	onGoodsNumberChange && onGoodsNumberChange(stepValue)
    }
    onAttrTagChange(attrId, attrValue, goodsAttrId, selected) {
    	const { onAttrTagChange } = this.props
		this.setState({
    		[`${attrId}AttrTag`]: selected ? attrValue : null 
    	})
    	onAttrTagChange && onAttrTagChange(attrValue, goodsAttrId, selected)
    }
	render() {
		const { meyley } = this.props

		let headInfo = ``;
		let headAttr = []
		if(meyley.productionDetail && meyley.productionDetail.goodsAttr ) {
			meyley.productionDetail.goodsAttr.map(attr => {
				if(this.state[`${attr.attrId}AttrTag`]) {
					headAttr.push(this.state[`${attr.attrId}AttrTag`])
				}
			})
		}
		if(headAttr.length) {
			headInfo += headAttr.join('/');
			headInfo += ` ${this.state.stepValue}个`;
		} else {
			headInfo += `选择属性规格`;
		}

	 	return (
	 		<div className="production-attr" style={{marginTop: '0.24rem', marginBottom: '0.24rem'}}>
	 			<Accordion defaultActiveKey="0" className="my-accordion">
		          <Accordion.Panel header={headInfo} className="pad">
		          	<div className={styles["production-attr-item"]}>
		          		{
		          			meyley.productionDetail && meyley.productionDetail.goodsAttr 
		          			&& meyley.productionDetail.goodsAttr.map((attr, i) => {
		          				
		          				return <div key={i} className={styles['production-attr-item-link']}>
		          					<div className={styles["production-attr-item-title"]}>
						          		{attr.attrName}
					          		</div>
					          		<div className="production-attr-item-content">
					          			{
					          				attr.attrValues.map((value, ii) => {
					          					return this.state[`${attr.attrId}AttrTag`] === value.attrValue ? (
					          						<Tag className={styles['production-attr-tag']} key={ii} onChange={this.onAttrTagChange.bind(this, attr.attrId, value.attrValue, value.goodsAttrId)} selected>{value.attrValue}</Tag>) : 
					          					(<Tag className={styles['production-attr-tag']} key={ii} onChange={this.onAttrTagChange.bind(this, attr.attrId, value.attrValue, value.goodsAttrId)} >{value.attrValue}</Tag>)
					          				})
					          			}
					          		</div>
		          				</div>
		          			})
		          		}
		          		
		          	</div>

		          	<div className={styles['production-attr-price']}>
		          		<span style={{float: 'left', color: 'rgb(149,149,149)', fontSize: '0.28rem'}}>合计: <span style={{color: 'rgb(255, 0, 81)', fontSize: '0.34rem'}}>￥{parseFloat(this.state.stepValue * this.state.price).toFixed(2)}</span> </span>
		          		<Stepper
				            className="production-detail-stepper"
				            showNumber min={1} max={200} defaultValue={1} onChange={this.onStepChange}
				         />
		          	</div>
		          </Accordion.Panel>
		        </Accordion>
	 		</div>
	  	);
	}
};

ProductionAttr.propTypes = {
};

export default ProductionAttr
